<template>
<div>
<div class="business">
   <div class="business_span"><span>营业额统计</span></div>
  <div class="business_data"></div>
   <div class="business_price" style="text-align:center"><span>营业额:<span style="color:red">{{sum.toFixed(2)}}</span>(元)</span></div>
  </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

import Bus from '@/utils/EventBus'
export default {
  name: 'businessIndex',

  data () {
    return {

      dateList: [], // 日期
      turnoverList: [], // 营业额
      sum: 0
    }
  },
  created () {
    Bus.$on('turnoverdata', (turnoverdata) => {
      // console.log(turnoverdata.dateList, 'this.dateList')

      this.dateList = turnoverdata.dateList.split(',')

      this.turnoverList = turnoverdata.turnoverList.split(',').map(Number)
      this.sum = this.turnoverList.reduce((sum, item) => sum + item)

      this.business()
    })
  },

  mounted () {

  },
  methods: {
    business () {
      const chartDom = document.querySelector('.business_data')

      const myChart = echarts.init(chartDom)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })

      const option = {
        tooltip: {
          trigger: 'axis',
          borderColor: 'rgba(255,255,255,0.5)', // 设置边框颜色为半透明白色
          borderStyle: 'dashed', // 设置边框为虚线
          borderWidth: 1 // 设置边框宽度
        // 其他 tooltip 配置...
        },
        xAxis: {
          type: 'category',
          data: this.dateList,
          axisLabel: {
          //  fontSize: 8 // 这里设置 X 轴刻度的字体大小
            // 刻度标签与轴线之间的距离
            // interval: 0 // 显示全部刻度
            // 使用formatter自定义刻度标签
            // show: false // 这里设置为 false 来取消 x 轴刻度

          },
          axisTick: {
            show: false // 这里设置为false即可取消x轴刻度线
          }

        },
        yAxis: {
          type: 'value'

        },
        series: [
          {
            data: this.turnoverList,
            type: 'line',
            lineStyle: {
              color: 'rgb(241,224,152)' // 这里改成你想要的颜色
              // type: 'dashed' // 设置为虚线
            }

          }
        ]
      }

      option && myChart.setOption(option)
    }

  }

}
</script>

<style lang="less" scoped>
.business{

  background-color: white;

 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.058);

}
.business_data{
  width: 580px;
  height: 500px;
}
.business_span{
  padding-top: 20px;
  span{
    padding-left: 20px;
    font-size: 20px;
    font-weight:600;
       }
}
.business_price{

   margin-top:-35px;
   padding-bottom:30px;
}

</style>
